<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 联系我们 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }

  p {
    font-size: 12px;
    color: #5a5a5a;
  }
</style>

<body>
  <div id="contact">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 网页内容 -->
    <section>
      <div style="width: 100%; height: 400px; overflow: hidden;">
        <img src="../img/slider-home-v1.jpg" width="100%" alt="">
      </div>
    </section>
    <!-- 联系我们 -->
    <section style="margin: 5% 0;">
      <div class="container">
        <div style="text-align: center;">
          <div>
            <img src="../img/object-09.png" alt="">
            <div style="display: flex; margin-top: 2%;margin-bottom: 3%;">
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
              <div style="margin: auto;">
                <h2 style="font-weight: 600;margin: auto;">联系我们</h2>
              </div>
              <div style="margin: auto;">
                <img src="../img/line.jpg" height="6px" width="329px" alt="">
              </div>
            </div>
          </div>
        </div>
        <div style="display: flex;">
          <div style="width: 50%;">
            <img src="../img/banner-h11.jpg" width="95%" alt="">
          </div>
          <div style="width: 50%; display: flex;">
            <div style="width: 70%;padding-left: 5%;">
              <h4 style="font-weight: 600;margin-bottom: 5%;">誉禾植物店</h4>
              <p>咨询热线：400-000-xxxx / (021)-1234578xxx</p>
              <p>公司邮箱：12385963xxxx@gmail.com</p>
              <p>花店地址：中国上海市xxx区xxx路12号moumou大厦5层5xx室</p>
              <p>手机：1234567xxxx</p>
              <p>座机：1234567xx</p>
            </div>
            <div style="width: 30%; text-align: center;">
              <h5 style="margin-bottom: 20%;text-align: center;">扫一扫关注我们</h5>
              <img src="../img/l4o9.jpg" width="100px" alt="">
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 地图 -->
    <section style="margin-bottom: 2%;">
      <div class="container">
        <a href="https://map.baidu.com/" target="_blank">
          <img src="../img/contact_1.jpg" alt="">
        </a>
      </div>
    </section>
    <!-- 网页尾部 -->
    <footer>
      <iframe src="./footer.html" width="100%" height="400px" frameborder="0"></iframe>
    </footer>
  </div>
</body>
<script>
  new Vue({
    el: '#contact',
  })
</script>

</html>